{%extends "base.html"%}
{%block title%}
从SYZOJ导入题目
{%endblock%}
{%block head%}
{%endblock%}
{%block body%}
<script>
    let main, socket;
    $(document).ready(() => {
        main = new Vue({
            el: "#main",
            delimiters: ['{[', ']}'],
            data: {
                errorMessage: "",
                successMessage: "",
                url: "",
                running: false,
                message: "", willPublic: false, openInNewTab: true
            }, methods: {

                start() {
                    this.running = true;

                    this.message = "开始导入。请查看服务器后台以获取实时状态。导入完成后此处将显示新的题目ID。";
                    this.errorMessage = this.successMessage = "";
                    $.post("/api/import_from_syzoj", { url: this.url, willPublic: this.willPublic }).done(ctx => {
                        ctx = JSON.parse(ctx);

                        this.errorMessage = "";
                        this.running = false;
                        this.message = "";

                        if (ctx.code) {
                            this.errorMessage = ctx.message;
                            // showErrorModal(ctx.message);

                            return;
                        }
                        // this.successMessage = ctx.message;
                        if (this.openInNewTab)
                            window.open("/show_problem/" + ctx.problem_id, "_blank")
                        else window.location.href = "/show_problem/" + ctx.problem_id;
                    });
                }
            }
        });
    });

</script>
<div style="top:10%;max-width: 500px;">
    <div class="ui left aligned container">
        <div class="ui header">
            <h1>从SYZOJ导入题目</h1>
        </div>
        <div class="ui stack segment">
            <div id="main" class="ui form" v-bind:class="{error:errorMessage!='',success:successMessage!=''}">
                <div class="ui field">
                    <label>SYZOJ题目地址</label>
                    <input type="text" placeholder="SYZOJ题目地址" v-model="url">
                </div>
                <div class="ui field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" v-model="willPublic">
                        <label>导入后公开</label>
                    </div>
                </div>
                <div class="ui field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" v-model="openInNewTab">
                        <label>在新标签页打开</label>
                    </div>
                </div>

                <div class="ui positive message" v-if="message!=''">
                    <div class="header">工作中</div>
                    <p>{[message]}</p>
                </div>
                <div class="ui error message">
                    <div class="header">错误</div>
                    <p>{[errorMessage]}</p>
                </div>
                <div class="ui success message">
                    <div class="header">成功</div>
                    <p>{[successMessage]}</p>
                </div>
                <div class="ui  message">
                    <div class="header">警告</div>
                    <p>目前已知问题:</p>
                    <p>1.由于HelloJudge2目前仅支持传统题，所以从SYZOJ导入的提交答案题和交互题无法正常使用。</p>
                    <p>2.暂不支持SYZOJ的附加文件.</p>
                    <p>3.不兼容SYZOJ的SPJ</p>
                    <!-- <p>2.</p> -->
                </div>
                <div class="ui green button" v-on:click="start" v-bind:class="{loading:running}">
                    开始
                </div>

            </div>
        </div>
    </div>
</div>
{%endblock%}